<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选择器列表</title>

        <style type="text/css">
            /* selector list (选择器列表) */
            div , p , pre , main {
                height: 50px ;
                width: 80% ;
                margin: 25px auto ;
                border: 1px solid red ;
            }

            span , u , code {
                margin: 10px ;
                background: #dedede ;
            }

            /* 逗号前后的选择器可能比较复杂，因此建议每个逗号之后直接换行 */
            .first>span , 
            .second>span {
                float: left ;
                height: 50px ;
                margin: 0 ;
                box-shadow: 0 0 1px 1px blue inset ;
            }

            .first>span { width: 25% ; }
            .second>span { width: 20% ; }
        </style>


    </head>
    <body>

        <div>
            <span>11</span>
            <u>下划线</u>
            <code>public </code>
        </div>
        <p></p>
        <div></div>
        <p></p>
        <div></div>
        <pre></pre>
        <div></div>
        <div></div>
        <main></main>

        <hr>

        <div class="first">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="second">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div></div>
        <div></div>
        <div></div>
        
    </body>
</html>